<template>
  <div class="app-container">
    <div class="search-container">
      <el-form ref="searchAlarmLogForm" :model="searchAlarmLogForm" label-width="80px">
        <el-col :span="5">
          <el-form-item style="margin-bottom: 5px;" label="报警名称">
            <el-input v-model="searchAlarmLogForm.alarmName" />
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item style="margin-bottom: 5px;" label="设备ID">
            <el-input v-model="searchAlarmLogForm.deviceId" />
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-date-picker
            v-model="searchAlarmLogForm.start"
            type="datetime"
            placeholder="选择开始时间"
            format="yyyy-MM-dd hh:mm:ss"
            value-format="yyyy-MM-dd hh:mm:ss"
          />
        </el-col>
        <el-col :span="5">
          <el-date-picker
            v-model="searchAlarmLogForm.end"
            type="datetime"
            placeholder="选择结束时间"
            format="yyyy-MM-dd hh:mm:ss"
            value-format="yyyy-MM-dd hh:mm:ss"
          />
        </el-col>
        <el-col :span="4">
          <el-button style="margin-left:20px;" type="primary" @click="searchPage">搜索</el-button>
        </el-col>
      </el-form>
    </div>
    <div class="table-container" :style="{width:'100%',overflow:'auto'}">
      <el-collapse v-model="activeName" accordion @change="handleChange">
        <template v-for="(item,idx) in alarmLogList">
          <el-collapse-item :key="idx" style="padding-bottom:0;" :name="idx">
            <template slot="title">
              <div style="width: 100%;">
                <el-row>
                  <el-col :span="4">报警名称: {{ item.alarmName }}</el-col>
                  <el-col :span="4">报警等级:
                    <div :style="getAlarmStyle(item.alarmLevel)" />
                    {{ item.alarmLevel }}
                  </el-col>
                  <el-col :span="4">
                    实际值: {{ item.value }}{{ item.unit }}
                  </el-col>
                  <el-col :span="5">
                    时间: {{ formatTime(item.time) }}
                  </el-col>
                  <el-col :span="4">参考值: {{ item.reference }}</el-col>
                </el-row>
                <el-row>
                  <el-col :offset="4" :span="4">设备ID: {{ item.deviceId }}</el-col>
                  <el-col :span="4">指标ID: {{ item.quotaId }}</el-col>
                  <el-col :span="5">指标名: {{ item.name }}</el-col>
                </el-row>
              </div>
            </template>
          </el-collapse-item>
        </template>
      </el-collapse>
    </div>

    <div class="page-container">
      <el-pagination
        :current-page="alarmLogPage.page"
        :page-size="alarmLogPage.pageSize"
        :page-count="alarmLogPage.pages"
        :total="alarmLogPage.counts"
        :pager-count="alarmLogPage.pageCount"
        align="center"
        layout="prev, pager, next, jumper"
        @current-change="handlePageChange"
        @prev-click="handlePageChange"
        @next-click="handlePageChange"
      />
    </div>
  </div>
</template>

<script>
import { getAlarmLog } from '@/api/alarm'
import { parseTime } from '@/utils'

const defaultAlarmLogPage = {
  page: 1,
  pageSize: 5,
  pageCount: 9
}
const defaultAlarmLogForm = {
  start: '',
  end: '',
  alarmName: '',
  deviceId: ''
}

export default {
  name: 'AlarmLog',
  data() {
    return {
      loading: false,
      listLoading: true,
      dialogType: 'new',
      dialogVisible: false,
      Height: '',
      activeName: '1',
      searchAlarmLogForm: Object.assign({}, defaultAlarmLogForm),
      alarmLogPage: Object.assign({}, defaultAlarmLogPage),
      alarmLogList: []
    }
  },
  watch: {
    '$route.query': {
      handler(newVal, oldVal) {
        console.log('newQuery', newVal)
        const query = this.$route.query
        if (Object.keys(newVal).length !== Object.keys(oldVal).length || (
          newVal.tag !== oldVal.tag || newVal.number !== oldVal.number || newVal.state !== oldVal.state
        )) {
          newVal.page = 1
          newVal.pageSize = 10
        }
        if (query.start) this.searchAlarmLogForm.start = query.start
        if (query.end) this.searchAlarmLogForm.end = query.end
        if (query.alarmName) this.searchAlarmLogForm.alarmName = query.alarmName
        if (query.deviceId) this.searchAlarmLogForm.deviceId = query.deviceId
        getAlarmLog(query).then(response => {
          // console.log('pager', response.data.pager)
          this.updatePage(response.data.pager)
        })
        this.activeName = '1'
      },
      deep: true
    }
  },
  created() {
    const query = this.$route.query
    let data = {}
    if (query) {
      if (query.page) data.page = parseInt(query.page)
      if (query.pageSize) data.pageSize = parseInt(query.pageSize)
      if (query.start) data.start = this.searchAlarmLogForm.start = query.start
      if (query.end) data.end = this.searchAlarmLogForm.end = query.end
      if (query.alarmName) data.alarmName = this.searchAlarmLogForm.alarmName = query.alarmName
      if (query.deviceId) data.deviceId = this.searchAlarmLogForm.deviceId = query.deviceId
    } else {
      data = { page: 1, pageSize: 10 }
    }
    getAlarmLog(data).then(response => {
      console.log('pager', response.data.pager)
      this.updatePage(response.data.pager)
    })
  },
  mounted() {
    document.getElementsByClassName('el-pagination__jump')[0].childNodes[0].nodeValue = '跳转第'
    document.getElementsByClassName('el-pagination__jump')[0].insertAdjacentText('beforeend', '页')
  },
  methods: {
    getAlarmStyle(alarmLevel) {
      let color
      if (alarmLevel === 0) color = '#9ee33b'
      else if (alarmLevel < 3) color = '#3BA1DE'
      else if (alarmLevel < 5) color = '#E1A128'
      else color = '#E32B3C'
      return {
        display: 'inline-block',
        marginLeft: '15px',
        marginRight: '15px',
        width: '15px',
        height: '15px',
        borderRadius: '10px',
        backgroundColor: color
      }
    },
    searchPage() {
      let data = Object.assign({}, this.searchAlarmLogForm)
      data = Object.assign(data, this.alarmLogPage)
      delete data['counts']
      console.log('data', data)
      this.$router.replace({
        path: this.$route.path,
        query: this.simplify(data)
      })
    },
    updatePage(pager) {
      this.alarmLogPage = {
        page: pager.page,
        pages: pager.pages,
        pageSize: pager.pageSize,
        counts: pager.counts
      }
      this.alarmLogList = pager.items
      this.listLoading = false
    },
    simplify(obj) {
      const res = Object.assign({}, obj)
      for (const key of Object.keys(res)) {
        if (res[key] === '') delete res[key]
      }
      return res
    },
    handlePageChange(param) {
      this.alarmLogPage.page = param
      const data = Object.assign({}, this.alarmLogPage)
      delete data['counts']
      if (this.searchAlarmLogForm.start) data.start = this.searchAlarmLogForm.start
      if (this.searchAlarmLogForm.end) data.end = this.searchAlarmLogForm.end
      if (this.searchAlarmLogForm.alarmName) data.alarmName = this.searchAlarmLogForm.alarmName
      if (this.searchAlarmLogForm.deviceId) data.deviceId = this.searchAlarmLogForm.deviceId
      this.$router.replace({
        path: this.$route.path,
        query: this.simplify(data)
      })
    },
    handleChange(val) {
      // console.log('val', val)
    },
    formatTime(time) {
      return parseTime(time)
    }
  }
}
</script>

<style scoped>

.search-container {
  width: 100%;
  height: 50px;
}

.table-container {
  width: 100%;
}

.page-container {
  width: 100%;
}

/deep/ .el-collapse-item__header {
  height: 65px;
  line-height: 30px;
}

/deep/ .el-collapse-item__content {
  padding-bottom: 5px;
  font-size: 13px;
  color: #FFFFFF;
}

</style>
